<template>
    <div class="skeleon" :style="{ width, height,background:bj }"  >
        <div class="block" :class="{ shan: animated }"></div>
    </div>
</template>
<script>

export default {
    props: {
        bj: {
            type: String,
            default: '#efefef'
        },
        width: {
            type: String,
            default: '100px'
        },
        height: {
            type: String,
            default: '100px'
        },
        animated: {
            type: Boolean,
            default: false
        }
    }
}
</script>



<style lang="scss">
.skeleon {
    display: inline-block;
    margin-right: 5px;
}

.shan {
    &::after {
        content: "";
        position: absolute;
        animation: shan 1.5s ease 0s infinite;
        top: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(to left,
                rgba(255, 255, 255, 0) 0,
                rgba(255, 255, 255, 0.3) 50%,
                rgba(255, 255, 255, 0) 100%);
        transform: skewX(-45deg);
    }
}

@keyframes shan {
    0% {
        left: -100%;
    }

    100% {
        left: 120%;
    }
}
</style>